<template>
	<view class="transfer-frame d-flex d-r a-center">
		<image class="frame-icon " src="/static/image/transfer-accounts.png"></image>
		<view class="frame-info">
			<text class="frame-info-title">来自{{message.useName.nickName}}的{{(userData.id==message.userId || userData.id==message.directUserId)? '￥'+centToYuan(message.amount):'转账'}}</text>
			<!--
			<text class="frame-info-title">来自{{nickName(message.userId)}}的{{(userData.id==message.userId || userData.id==message.directUserId)? '￥'+centToYuan(message.amount):'转账'}}</text>
			-->
			<!--当前为收款人-->
			<template v-if="userData.id==message.directUserId">
				<text v-if="message.status===1" class="frame-info-describe">已收款</text>
				<text v-if="message.status===2" class="frame-info-describe">已被退还</text>
				<!--
				<text v-if="message.status===3" class="frame-info-describe">已被退还</text>
				-->
			</template>
			<!--当前为转账人-->
			<template v-if="userData.id==message.userId">
				<text v-if="message.status===1" class="frame-info-describe">已收款</text>
				<text v-if="message.status===2" class="frame-info-describe">已被退还</text>
				<!--
				<text v-if="message.status===3" class="frame-info-describe">已被退还</text>
				-->
			</template>
			<!--当前不是收款人也不是转账人-->
			<template v-if="userData.id!=message.userId&&userData.id!=message.directUserId">
				<text v-if="message.status===1" class="frame-info-describe">已收款</text>
				<text v-if="message.status===2" class="frame-info-describe">已被退还</text>
				<!--
				<text v-if="message.status===3" class="frame-info-describe">已被退还</text>
				-->
			</template>
		</view>
	</view>
</template>

<script lang="ts">
import { defineComponent, watchEffect, reactive, toRefs } from 'vue';
import { userData as userDataStore } from "@/store/userData";
import { centToYuan } from "@/utils/format";
import { imStore } from "@/store/imStore";

const userData: any = userDataStore();
export default defineComponent({
	props: {
		data: {
			type: Object,
			default: () => {
				return {};
			},
		},
	},
	setup(props:any, ctx:any) {
		const IM_STORE = imStore();
		const data = reactive({
			message: {} as any,
			userData: {} as any,
		});
		watchEffect(()=>{
			data.message = props.data;
			data.userData = userDataStore()
		});
		//获取备注名称
		const nickName = (userId:string) => {
			let remark = null;
			let nameCard = null;
			let nick = null;
			IM_STORE.friends.forEach((f: any) => {
				if (f.userID === userId) {
					remark = f.remark;
				}
			});
			let type  = IM_STORE?.conversation?.type;
			if (type === "GROUP") {
				let userData:any = IM_STORE?.groupMembers.find((item:any) => item.userID === userId);
				if(userData?.nameCard !='')nameCard = userData?.nameCard
				if(userData?.nick !='')nick = userData?.nick;
			}
			return remark || nameCard || nick;
		};
		return {
			...toRefs(data),
			centToYuan,
			nickName
		};
	}
});
</script>

<style lang="scss" scoped>
.transfer-frame{
	width: 490rpx;
	height: 160rpx;
	border-radius: 20rpx;
	background:#84A9E3;
	padding-left: 30rpx;
	
	.frame-icon{
		width: 60rpx;
		height: 60rpx;
	}
	.frame-info{
		padding-left: 10rpx;
		padding-right: 20rpx;
		.frame-info-title{
			width: 370rpx;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			lines:1;
			  
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 34rpx;
			color: #FFFFFF;
		}
		.frame-info-describe{
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
}

/*     公共属性     */
.psr {
    position: relative;
}

.psa {
    position: absolute;
}

.center {
    text-align: center;
}

.bold {
    font-weight: bold;
}


.a-center {
    align-items: center;
}

.j-center{
    justify-content: center;
}

.j-between {
    justify-content: space-between;
}

.j-around {
    justify-content: space-around;
}


.d-flex {
    display: flex;
}

.d-c {
    flex-direction: column;
    
}
.d-r {
    flex-direction: row !important;
}

.j-end {
    justify-content: flex-end;
}


.wrap {
    flex-wrap: wrap;
}

.nowrap {
    flex-wrap: nowrap;
}

.uline{
    text-decoration: underline;
}

.c_main{
    color:$slim-main;
}

.b_main{
    background-color:$slim-main;
}
</style>